<template>
  <el-drawer v-model="useSettingStore().settingShow"
             direction="rtl"
             size="360px">
    <template #header>
      <h2 class="setting-title">设置</h2>
    </template>
    <template #default>
      <el-collapse v-model="activeName" accordion >
        <el-collapse-item v-for="(scale,index) in scaleList" :index="index" :name="scale.id">
          <template #title>
            <div class="left_shu">{{ scale.deviceName }}</div>
          </template>
          <el-row>
            <el-col :span="18">
              <el-input :formatter="(value) => value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
                        :parser="(value) => value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
                        v-model="scale.density"><template #append>吨/立方米</template>
              </el-input>
            </el-col>
            <el-col :span="1">
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="submit(scale)">设置</el-button>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>

    </template>
     <template #footer>
       <span class="setting_label">对皮带秤密度的统一设置</span>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import useSettingStore from '@/stores/setting'
import { GET, PUT } from '@/api'
import { ElNotification } from 'element-plus'

const scaleList = ref<Scale[]>([])
const activeName = ref(0)

watchEffect(()=>{
  if (useSettingStore().settingShow){
    getScaleDevice()
  }
})

function getScaleDevice(){
  GET('scaleDevice',{}).then(resp=>{
    scaleList.value = resp.data
    activeName.value = useSettingStore().settingActiveName
  })
}

function submit(scale){
  PUT("configDensity",{'id': scale.id,'density': scale.density}).then(resp =>{
    useSettingStore().setFlushDevice(true)
    ElNotification({
      title: '设置成功',
      message: '设置'+ scale.deviceName +'密度为：'+ scale.density,
      type: 'success',
      position: 'bottom-right',
      duration: 1000,
    })
  })
}
</script>

<style scoped lang="scss">
.setting-title {
  font-size: 20px;
  color: #000;
  font-weight: 900;
  text-align: center;
  line-height: 1;
}

.left_shu {
  color: #000;
  font-weight: 900;
  position: relative;
  text-indent: 10px;
  padding: 0 ;
  line-height: 1;
  &::before {
    display: block;
    content: " ";
    height: 12px;
    width: 4px;
    border-radius: 2px;
    background: #0072ff;
    position: absolute;
    left: 0;
  }
}

.setting_label {
  display: flex;
  justify-content: center;
  font-size: 14px;
  color: #838282;
}
</style>